<template>
  <div>
    <!-- 点击单位名称的页面 -->

<!--    页面上方区域-->
<div style="margin-bottom: 20px;font-size: medium;font-weight: 900;">工人信息</div>
    <!--    输入框-->
      <el-form label-width="90px" :inline="true" :model="form" ref="formRef">
        <el-form-item prop="workerName" label="工人姓名">
          <el-input v-model="form.workerName" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-input v-model="form.gender" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="workerPhone" label="联系方式">
          <el-input v-model="form.workerPhone" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="unitId" label="参与单位">
          <el-input v-model="form.unitId" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="identityCard" label="身份证号">
          <el-input v-model="form.identityCard" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="teamsId" label="班组名称">
          <el-input v-model="form.teamsId" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="remunerationMethod" label="计酬方式">
          <el-input v-model="form.remunerationMethod" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="wageScale" label="工资标准">
          <el-input v-model="form.wageScale" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="cardNumber" label="卡号">
          <el-input v-model="form.cardNumber" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="bank" label="开户行">
          <el-input v-model="form.bank" autocomplete="off" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>

<!--    表单区域-->
    <div class="table">
      <el-divider content-position="center">考勤记录表</el-divider>
      <el-table :data="tableData" stripe border style="margin-top: 10px">
        <el-table-column prop="employeeName" label="月份" width="90"></el-table-column>
        <el-table-column label="考勤记录">
          <template slot-scope="scope">
            <div class="day-duration-container">
              <div class="day-duration" v-for="(day, index) in scope.row.days" :key="index">
                <div class="day">{{ index + 1 }}</div>
                <div class="duration">{{ day || '' }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>


      <div class="table">
        <el-divider content-position="center">工资表</el-divider>
        <el-table :data="tableData" stripe border style="margin-top: 10px">
        <el-table-column prop="employeeName" label="月份"></el-table-column>
        <el-table-column prop="num" label="应发工资"></el-table-column>
        <el-table-column prop="time" label="实发工资"></el-table-column>
        <el-table-column prop="qianfa" label="欠发工资"></el-table-column>
        <el-table-column prop="resourceName" label="扣除工资"></el-table-column>
      </el-table>
      </div>

    <!-- 底部区域 -->
    <span slot="footer">
      <router-link to="/resources"><el-button type="primary" style="margin-top: 160px;margin-left:700px">确 定</el-button></router-link>
      <router-link to="/resources"><el-button style="margin-left:30px">取 消</el-button></router-link>
            </span>
  </div>
</template>

<script>
export default {
  name: "WorkerInformation",
  data(){
    return{
      tableData:[],
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      form: {
        workerName:this.$route.query.param.workerName,
        gender:this.$route.query.param.gender,
        workerPhone:this.$route.query.param.workerPhone,
        unitId:this.$route.query.param.unitId,
        identityCard:this.$route.query.param.identityCard,
        teamsId:this.$route.query.param.teamsId,
        remunerationMethod:this.$route.query.param.remunerationMethod,
        wageScale:this.$route.query.param.wageScale,
        cardNumber:this.$route.query.param.cardNumber,
        bank:this.$route.query.param.bank,
      },
    }
  },
  created() {
    this.generateRandomData();
  },
  methods:{
    // 生成随机考勤记录
    generateRandomData() {
      const randomData = [];
      for (let i = 0; i < 2; i++) {
        const row = {
          employeeName: `2022-0${i + 1}`,
          resourceName: `500.00`,
          num: `12000.00`,
          time: `10000.00`,
          qianfa: `1500.00`,
          days: [],
        };
        for (let j = 0; j < 31; j++) {
          row.days.push(Math.floor(Math.random() * 2) + 0); // 随机生成0，1来代表他的考勤
        }
        randomData.push(row);
      }
      this.tableData = randomData;
    },
  }
}
</script>

<style scoped>

.table {
  overflow-x: auto;
}

.day-duration-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
}

.day-duration {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px; /* Adjust width as needed */
}

.day,
.duration {
  width: 100%; /* Ensure full width */
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ebeef5;
}
</style>